<template>
	<div class="common-layout main">
		<form>
			<input type="text" v-model="sea"/>
			<input type="button" value="查找内容" @click="Search()"/>
		</form>
		<el-carousel indicator-position="outside" height="600px">
		    <el-carousel-item v-for="it in swiperlist" :key="it.id">
		      <el-image :src="`${$Imgurl}/showImg/${it.picture}`"></el-image>
		    </el-carousel-item>
		</el-carousel>
		<p>好评最高5本书</p>
		<el-row :gutter="20">
		    <el-col :span="4.8"  v-for="it in find.findHot1" :key="it.id">
				<el-image :src="`${$Imgurl}/showImg/${it.picture}`"></el-image>
				<label>{{it.name}}</label>
				<p>
					￥{{it.price}}<button @click="buy(it)">购买</button>
				</p>
			</el-col>
		  </el-row>
		<p>销量最高5本书</p>
		<el-row :gutter="20">
		    <el-col :span="4.8"  v-for="it in find.findHot2" :key="it.id">
				<el-image :src="`${$Imgurl}/showImg/${it.picture}`"></el-image>
				<label>{{it.name}}</label>
				<p>
					￥{{it.price}}<button @click="buy(it)">购买</button>
				</p>
			</el-col>
		  </el-row>
		<p>意向最高5本书</p>
		<el-row :gutter="20">
		    <el-col :span="4.8"  v-for="it in find.findHot3" :key="it.id">
				<el-image :src="`${$Imgurl}/showImg/${it.picture}`"></el-image>
				<label>{{it.name}}</label>
				<p>
					￥{{it.price}}<button @click="buy(it)">购买</button>
				</p>
			</el-col>
		  </el-row>
	</div>
</template>

<script>
	import instance from '../../../../ajax'
	import { ElMessage } from 'element-plus'
	
	export default{
		name:'Main',
		data(){
			return{
				swiperlist:[],
				find:{
					findHot1:[],
					findHot2:[],
					findHot3:[],
				},
				sea:''
			}
		},
		created() {
			this.axios.get('/api/public/findHot/5/1').then((res)=>{
				let data=res.data.data
				this.swiperlist=data
			}).catch((error)=>{
				console.log(error)
			})
			this.axios.get('/api/public/book/findFav5').then((res)=>{
				this.find.findHot1=res.data.data
			}).catch((error)=>{
				console.log(error)
			})
			this.axios.get('/api/public/book/findSale5').then((res)=>{
				this.find.findHot2=res.data.data
			}).catch((error)=>{
				console.log(error)
			})
			this.axios.get('/api/public/book/findRate5').then((res)=>{
				this.find.findHot3=res.data.data
			}).catch((error)=>{
				console.log(error)
			})
			this.sea=this.$store.state.sea
		},
		methods:{
			Search(){
				this.$store.state.sea = this.sea
				this.$router.push('/home/detail?key=1')
			},
			buy(obj){
				if(localStorage.getItem('role')=='P'){
					instance.get(`/api/public/addCart/${obj.id}`).then((res)=>{
						if (res.data.code==200) {
							ElMessage({
								showClose: true,
							    message: '已添加购物车',
							    type: 'success',
							  })
						}
					}).catch((error)=>{
						console.log(error)
					})
				}else{
					ElMessage({
						showClose: true,
					    message: '未登录，无法购买',
					    type: 'error',
					  })
				}
			},
		}
	}
</script>

<style scoped>
	.main{
		width: 80%;
		margin: 10px auto;
	}
	.main form{
		text-align: center;
		line-height: 30px;
		display: flex;
		justify-content: center;
	}
	.main form input{
		height: 50px;
		border: 1px solid red;
	}
	.main form input[type=text]{
		width: 30%;
		border-radius: 30px 0 0 30px;
		padding-left: 20px;
		font-size: 15px;
	}
	.main form input[type=button]{
		height: 54px;
		width: 90px;
		background: red;
		color: white;
		border-radius: 0 30px 30px 0;
	}
	.main p{
		width: 100%;
		padding-bottom: 15px;
		padding-top: 15px;
		color: purple;
		font-weight: bold;
		font-size: 20px;
	}
	.el-carousel{
		margin-top: 10px;
	}
	.el-image{
		width: 100%;
		height: 100%;
	}
	.el-col{
		width: 19%;
		display: inline-block;
		text-align: center;
	}
	.el-col .el-image{
		width: 150px;
		height: 170px;
	}
	.el-col label{
		display: block;
		padding-bottom: 10px;
	}
	.el-col p{
		width: 60%;
		border: none;
		margin: 0 auto;
		display: flex;
		color: orange;
		font-weight: normal;
		font-size: 20px;
	}
</style>
